<template>
  <div class="wrap">
    <yx-input v-model="username" class="user-input">
      <template #text> <span>必填</span> </template>
      <template #icon>
        <van-icon name="phone"></van-icon>
      </template>
      <!-- # 给插槽起名字 相当于是之前的 v-slot:xxx 放template是因为不会被解析成任何标签 不会污染布局-->
    </yx-input>
    <!-- 用户名 -->
    <yx-input v-model="password">
      <template #text> <span>必填</span> </template>
      <template #icon>
        <van-icon name="eye-o"></van-icon>
      </template>
    </yx-input>
    <!-- 密码 -->

    <!-- 在vue3中 v-model变成了 modelValue+update事件的合写 -->
  </div>
</template>
<script>
import yxInput from "../../components/yxInput.vue";
import { ref, reactive, toRefs } from "vue";
export default {
  setup(props) {
    const username = ref("");
    const password = ref("");
    return {
      username,
      password,
    };
  },
  components: {
    yxInput,
  },
};
</script>
<style lang="scss">
.wrap {
  width: 300px;
  margin: 30px auto;
  .user-input {
    margin-bottom: 30px;
  }
}
</style>
